<!-- 排行 -->
<template>
  <div class="tableMaxHight paddingR20">
    <el-tabs v-model="data.query.order" type="card" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="赢钱榜" :name="1" />
      <el-tab-pane label="输钱榜" :name="2" />
      <el-tab-pane label="下注金额" :name="3" />
      <el-tab-pane label="胜率榜" :name="4" />
    </el-tabs>
    <SearchTable :query="data.query" :list="data.list" :total="data.total" @changeSize="changeSize"
      @changePage="changePage" @search="getSearchList" @reset="onHideDetails(true)" 
      @changeTh="data.dialogVisible = true">
      <template #form>
        <Operator ref="OperatorRef" @query="queryItem" />
        <el-form-item label="游戏：">
          <el-select v-model="data.query.game_id" placeholder="请选择" filterable>
            <el-option label="全部" :value="-1" />
            <el-option v-for="item in indexStore.gameArray" :key="item.value"
              :label="'【' + item.value + '】' + item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="日期时间：">
          <el-date-picker v-model="data.query.date" type="daterange" range-separator="-" start-placeholder="请选择开始时间"
            end-placeholder="请选择结束时间" value-format="YYYY-MM-DD" clearable />
        </el-form-item>
      </template>
      <template #button></template>
      <template #table>
        <template v-for="(item, index) in data.fields" :key="index">
          <el-table-column
            v-if="item.label == '下注金额' && data.query.order == 3 ? true : item.label == '胜率' && data.query.order == 4 ? true : item.visible"
            :prop="item.prop" :label="item.label" :width="item.width">
            <template #header>
                <el-tooltip v-if="item.tips" effect="dark" placement="top">
                  <template #content>
                    {{item.tips}}
                  </template>
                  <el-icon class="ques-tips">
                    <QuestionFilled />
                  </el-icon>
                </el-tooltip>
                {{ item.label }}
              </template>
            <template v-if="item.prop == 'account_id'" #default="scope">
              <span class="item_details" @click="checkUser(scope.row)">
                {{ scope.row.account }}
              </span>
            </template>
            <template v-if="item.prop == 'agent_id'" #default="scope">
              {{ selectToLabel(indexStore.agentArray, scope.row.agent_id) }}({{ scope.row.area }})
            </template>
            <template v-if="item.prop == 'game_id'" #default="scope">
              {{ selectToLabel(indexStore.gameArray, scope.row.game_id) }}
            </template>
            <template v-if="item.prop == 'win_lose'" #default="scope">
              <span :class="colorClass(scope.row.win_lose)">{{
                scope.row.win_lose
                }}</span>
            </template>
            <template v-if="item.prop == 'history_win_lose'" #default="scope">
              <span :class="colorClass(scope.row.history_win_lose)">{{
                scope.row.history_win_lose
                }}</span>
            </template>
          </el-table-column>
        </template>
      </template>
    </SearchTable>
    <!-- 变更表头弹框 -->
    <tableHeader :dialogVisible="data.dialogVisible" :list="data.fields" @cancel="data.dialogVisible = false"
      @resetData="resetData"></tableHeader>

    <!-- 玩家信息详情 -->
    <UserDetails :show="data.isUserDetails" @onHideDetails="onHideDetails" :checkedItem="data.checkedItem" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, onMounted, computed } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import Operator, { type QueryType } from '@/components/FormItem/Operator.vue'
import tableHeader from '@/components/tableHeader/tableHeader.vue'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import UserDetails from '@/views/player/components/user-details.vue'
import { getRankList } from '@/api/gameReport'
import { selectToLabel, colorClass } from '@/utils/index'
import { BigPercent, BigWan } from '@/utils/math'
import { getDateDay, setTimeValue, setTimestampTime } from '@/utils/time'
import { useStore } from '@/stores/index'
const indexStore = useStore()
export interface commercialType {
  value: number
  label: string
}
const data = reactive({
  query: {
    page: 1,
    size: 100,
    order: 1,
    agent_id: -1,
    operated_id: indexStore.operatorArray[0].value,
    game_id: -1,
    date: [getDateDay(0), getDateDay(0)]
  },
  list: [],
  total: 0,
  fields: [
    { label: '排名', prop: 'index', width: '90', visible: true, tips: '排名序号' },
    { label: '平台昵称', prop: 'account_id', width: '200', visible: true, tips: '玩家名称' },
    { label: '商户昵称', prop: 'agent_id', width: '200', visible: true, tips: '玩家所属商户' },
    { label: '下注金额', prop: 'sum_bet', width: '', visible: false, tips: '玩家下注过的金额' },
    { label: '胜率', prop: 'win_ratio', width: '', visible: false, tips:'玩家在筛选日期内的游戏胜率玩家赢的局数/玩家总局数' },
    { label: '当日输赢', prop: 'win_lose', width: '', visible: true, tips: '玩家今日输赢情况，正为玩家赢，负则反之' },
    { label: '历史输赢', prop: 'history_win_lose', width: '', visible: true, tips: '玩家的历史输赢情况，正为玩家赢，负为输' },
    { label: '余额', prop: 'wallet', width: '', visible: true, tips: '玩家当前持有余额数量' },
    { label: '游戏局数', prop: 'game_count', width: '', visible: true, tips: '玩家历史游戏次数' },
    { label: '创建时间', prop: 'created_time_stamp', width: '', visible: true, tips: '玩家的注册时间' },
    { label: '最后登录时间', prop: 'last_login_time', width: '', visible: true, tips: '玩家最近一次上线的时间' },
  ],
  dialogVisible: false,
  exportLoading: false,
  isUserDetails: false,
  checkedItem: {} as any
})

// 商户类别 + 商户
const queryItem = (item: QueryType) => {
  data.query.agent_id = item.agent_id
  data.query.operated_id = item.operated_id
}

onMounted(async () => {
  getOperatedList()
})

// 选择游戏tab
const handleClick = async (tab: TabsPaneContext) => {
  data.query.order = tab.paneName as number
  getSearchList()
}

const getSearchList = async () => {
  data.query = setTimeValue(data.query)
  let res = await getRankList(data.query)
  res.data?.forEach((item: any,index:number) => {
    item.index = index+1
    item.created_time_stamp = setTimestampTime(item.created_time_stamp)
    item.last_login_time = setTimestampTime(item.last_login_time)
    item.sum_bet = BigWan(item.sum_bet)
    item.win_lose = BigWan(item.win_lose)
    item.history_win_lose = BigWan(item.history_win_lose)
    item.wallet = BigWan(item.wallet)
    item.win_ratio = BigPercent(item.win_times, item.bet_times) // 胜率 =  中奖次数 / 总下注次数
  })
  data.list = res.data
}

// 选择总代-查询总代下所有商户
const getOperatedList = async () => {
  const query = OperatorRef.value.getFirstSearchList()
  query.then((res:any)=>{
    data.query.agent_id = res.agent_id
    data.query.operated_id = res.operated_id
    getSearchList()
  })
}

// 查看玩家信息
const checkUser = async (row: any) => {
  data.isUserDetails = true
  data.checkedItem = row
}

// 修改页数
const changeSize = (val: number) => {
  data.query.size = val
  getSearchList()
}

const changePage = (val: number) => {
  data.query.page = val
  getSearchList()
}

// 重置表头
const resetData = (val: any) => {
  data.fields = val
}

// 重置
const OperatorRef = ref<any>()
const onHideDetails = (show: boolean) => {
  data.isUserDetails = false
  data.checkedItem = {} as any
  if (show) {
    data.query = {
      page: 1,
      size: 50,
      order: data.query.order,
      agent_id: -1,
      operated_id: indexStore.operatorArray[0].value,
      game_id: -1,
      date: [getDateDay(0), getDateDay(0)]
    }
  }
  getOperatedList()
}
</script>

<style scoped lang="scss"></style>